import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

export const dragResizableFunc = ( columns )=>{
    return {
        header: {
          cell: (h, props, children) => {
            // 由于drag事件结束后必然会出发click事件，所以我们需要一个参数去判断当前操作是click点击事件还是drag拖拽事件
            let isDrag = false
            const { key, ...restProps } = props
            const col = columns.find(col => {
              const k = col.dataIndex || col.key
              return k === key
            })
            if (!col || !col.width || !col.ynDraggable) {
              return h('th', { ...restProps }, [...children])
            }
            const dragProps = {
              key: col.dataIndex || col.key,
              class: 'table-draggable-handle',
              attrs: {
                w: 10,
                x: col.width,
                z: 1,
                axis: 'x',
                draggable: true,
                transform: 'none',
                resizable: false
              },
              on: {
                dragging: (x) => {
                    isDrag = true
                  col.width = Math.max(x, 160)
                },
                dragstop:()=>{
                    isDrag = true
                    setTimeout(() => {
                        isDrag = false
                    }, 300)
                }
              }
            }
            // console.log(dragProps,'dragProps')
            // 取出column的click事件，对事件进行判断，如果现在isDrag参数为true，则截胡，防止拖动后触发click事件
            if (restProps.on && restProps.on.click) {
                let clickFunc = restProps.on.click
                restProps.on.click = (event) => {
                if (isDrag) {
                    return
                }
                clickFunc(event)
                }
            }
            const drag = h('vue-draggable-resizable', { ...dragProps })
            // console.log(drag,'drag')
            return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
          }
        }
      }
}
